<style lang="less">
    @import '../styles/menu.less';
</style>

<template>
    <Menu ref="sideMenu" :active-name="$route.name" :open-names="openNames" :theme="menuTheme" width="auto"
          @on-select="changeMenu">
        <template v-for="item in menuList">
<!--            <Submenu :name="item.name" :key="item.name">-->
<!--                <template slot="title">-->
<!--                    <Icon :type="item.icon" :size="iconSize"></Icon>-->
<!--                    <span class="layout-text">{{ item.title }}</span>-->
<!--                </template>-->
<!--                <template v-for="(child,index) in item.children">-->
<!--                    <MenuItem :name="child.name" :key="'menuitem' + index">-->
<!--                        <Icon :type="child.icon" :size="iconSize" :key="'icon' + child.title"></Icon>-->
<!--                        <span class="layout-text" :key="'title' + child.title">{{ child.title }}</span>-->
<!--                    </MenuItem>-->
<!--                </template>-->
<!--            </Submenu>-->
                <template v-for="(child,index) in item.children">
                    <MenuItem :name="child.name" :key="'menuitem' + index">
                        <Icon :type="child.icon" :size="iconSize" :key="'icon' + child.title"></Icon>
                        <span class="layout-text" :key="'title' + child.title">{{ child.title }}</span>
                    </MenuItem>
                </template>
        </template>
    </Menu>
</template>

<script>
    import Util from '@/libs/util';

    export default {
        name: 'sidebarMenu',
        props: {
            menuList: Array,
            iconSize: Number,
            menuTheme: {
                type: String,
                default: 'dark'
            },
            openNames: {
                type: Array
            }
        },
        created () {
            console.log(this.menuList);
        },
        methods: {
            changeMenu (active) {
                this.$emit('on-change', active);
            },
            itemTitle (item) {
                if (typeof item.title === 'object') {
                    return this.$t(item.title.i18n);
                } else {
                    return item.title;
                }
            }
        },
        updated () {
            this.$nextTick(() => {
                if (this.$refs.sideMenu) {
                    this.$refs.sideMenu.updateOpened();
                }
            });
        }

    };
</script>
